import dayjs from "dayjs";
import { usePublicHooks } from "../hooks";
import { reactive, ref, onMounted, h } from "vue";
import { message } from "@/utils/message";
import { addDialog } from '@/components/ReDialog'
import { ElMessageBox } from 'element-plus'
import { type FormItemProps } from "./types";
import { type PaginationProps } from "@pureadmin/table";
import { useMapStoreHook } from "@/store/modules/map";
import elForm from '../form.vue'

import { crossList, addCross, updateCross, delCross, getCross } from '@/utils/api/dispatch/cross'
import { GetAllStation } from '@/utils/api/dispatch/station'
const pureMap = useMapStoreHook()

export function useCrossDept() {
    const form = reactive({
        Name: "",
        pageNumber: 0,
        pageSize: 200,
        sortName: "createtime",
        sortType: 0
    });

    const formRef = ref();
    const dataList = ref([]);
    const loading = ref(true);
    const { tagStyle } = usePublicHooks();
    const pagination = reactive<PaginationProps>({
        total: 0,
        pageSize: 100,
        currentPage: 1,
        background: true
    });

    // 状态Select
    const SelectStatusOptions = reactive([
        { value: 1, label: '启用' },
        { value: 0, label: '禁用' },
        { value: 2, label: '锁定' },
    ])

    // 站点Select
    const stationOptions = ref([])

    // 状态
    function formatStatus(status) {
        const stateMap = {
            1: '启用',
            0: '禁用',
            2: '锁定'
        }
        return stateMap[status]
    }
    // 类型
    function formatType(status) {
        const stateMap = {
            0: '站点交管',
            1: '唯一区域交管',
            2: '巷道区域交管',
            3: '公共区域交管',
            4: '可穿行交管',
            5: '巷道多车交管',
        }
        return stateMap[status]
    }

    const size = 'small'
    const columns: TableColumnList = [
        {
            label: "名称",
            prop: "name",
        },
        {
            label: "状态",
            prop: "status",
            cellRenderer: ({ row, props }) => (
                <el-tag size={props.size} style={tagStyle.value(row.status)}>
                    {formatStatus(row.status)}
                </el-tag>
            ),
            sortable: true
        },
        {
            label: "类型",
            prop: "type",
            width: 120,
            cellRenderer: ({ row, props }) => (
                <span>
                    {formatType(row.type)}
                </span>
            ),
            sortable: true
        },
        {
            label: "操作",
            fixed: "right",
            width: 60,
            slot: "operation"
        }
    ]

    async function onSearch() {
        loading.value = true;
        const { Content } = await crossList(form);
        let newData = Content.Results;
        // 获取最后一个元素的name
        if (newData.length > 0) {
            let name = newData[newData.length - 1]?.name
            pureMap.changeName(name)
        } else {
            pureMap.changeName(1)
        }
        // console.log('crossHook初始化=>', pureMap.incrementalName);

        dataList.value = newData;
        pagination.total = Content.TotalCount;
        pagination.pageSize = Content.PageSize;
        pagination.currentPage = Content.PageNumber + 1;

        setTimeout(() => {
            loading.value = false;
        }, 500);
    }

    // 重置
    function resetForm(formEl) {
        if (!formEl) return;
        formEl.resetFields();
        onSearch();
    }



    // 删除
    function handleDelete(row) {
        ElMessageBox.confirm(
            `是否确认删除名称为${row.name}的数据项?`,
            '提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
            }
        ).then(() => {
            delCross(row.id).then(res => {
                if (res.Code === 0) {
                    message(`您删除了名称为${row.name}的这条数据`, { type: "success" });
                    onSearch();
                }
            })
        }).catch(() => { })
    }

    function handleSizeChange(val: number) {
        form.pageSize = val
        onSearch()
    }

    function handleCurrentChange(val: number) {
        form.pageNumber = val - 1
        onSearch()
    }

    onMounted(async () => {
        onSearch()

        // 站点下拉
        const { Content } = await GetAllStation()
        stationOptions.value = Content
    })

    return {
        columns,
        size,
        loading,
        dataList,
        handleDelete,
        form,
        onSearch,
        resetForm,
        pagination,
        handleSizeChange,
        handleCurrentChange
    }
}